<template>
  <el-form-item
    :label="formData.name"
    :prop="formData.model"
  >
    <template v-if="formData.type == 'input'">
      <el-input
        v-if="formData.options.dataType == 'number' || formData.options.dataType == 'integer'"
        v-model.number="dataModel"
        :type="formData.options.dataType"
        :placeholder="formData.options.placeholder"
        :style="{width: formData.options.width}"
        :disabled="formData.options.disabled"
      />
      <el-input
        v-else
        v-model="dataModel"
        :type="formData.options.dataType"
        :disabled="formData.options.disabled"
        :placeholder="formData.options.placeholder"
        :style="{width: formData.options.width}"
      />
    </template>

    <template v-if="formData.type == 'textarea'">
      <el-input
        v-model="dataModel"
        type="textarea"
        :rows="5"
        :disabled="formData.options.disabled"
        :placeholder="formData.options.disabled?'': formData.options.placeholder"
        :style="{width: formData.options.width}"
      />
    </template>

    <template v-if="formData.type == 'number'">
      <el-input-number
        v-model="dataModel"
        :style="{width: formData.options.width}"
        :step="formData.options.step"
        :min="formData.options.min > 0 ? formData.options.min : -Infinity"
        :max="formData.options.max > 0 ? formData.options.max : Infinity"
        controls-position="right"
        :disabled="formData.options.disabled"
      />
    </template>

    <template v-if="formData.type == 'radio'">
      <el-radio-group
        v-model="dataModel"
        :style="{width: formData.options.width}"
        :disabled="formData.options.disabled"
      >
        <el-radio
          v-for="(item, index) in (formData.options.remote ? formData.options.remoteOptions : formData.options.options)"
          :key="index"
          :style="{display: formData.options.inline ? 'inline-block' : 'block'}"
          :label="item.value"
        >
          <template v-if="formData.options.remote">{{ item.label }}</template>
          <template v-else>{{ formData.options.showLabel ? item.label : item.value }}</template>
        </el-radio>
      </el-radio-group>
    </template>

    <template v-if="formData.type == 'checkbox'">
      <el-checkbox-group
        v-model="dataModel"
        :style="{width: formData.options.width}"
        :disabled="formData.options.disabled"
      >
        <el-checkbox
          v-for="(item, index) in (formData.options.remote ? formData.options.remoteOptions : formData.options.options)"
          :key="index"
          :style="{display: formData.options.inline ? 'inline-block' : 'block'}"
          :label="item.value"
        >
          <template v-if="formData.options.remote">{{ item.label }}</template>
          <template v-else>{{ formData.options.showLabel ? item.label : item.value }}</template>
        </el-checkbox>
      </el-checkbox-group>
    </template>

    <template v-if="formData.type == 'time'">
      <el-time-picker
        v-model="dataModel"
        :is-range="formData.options.isRange"
        :placeholder="formData.options.placeholder"
        :start-placeholder="formData.options.startPlaceholder"
        :end-placeholder="formData.options.endPlaceholder"
        :readonly="formData.options.readonly"
        :disabled="formData.options.disabled"
        :editable="formData.options.editable"
        :clearable="formData.options.clearable"
        :arrow-control="formData.options.arrowControl"
        :value-format="formData.options.format"
        :style="{width: formData.options.width}"
      />
    </template>

    <template v-if="formData.type=='date'">
      <el-date-picker
        v-model="dataModel"
        :type="formData.options.type"
        :placeholder="formData.options.placeholder"
        :start-placeholder="formData.options.startPlaceholder"
        :end-placeholder="formData.options.endPlaceholder"
        :readonly="formData.options.readonly"
        :disabled="formData.options.disabled"
        :editable="formData.options.editable"
        :clearable="formData.options.clearable"
        :value-format="formData.options.timestamp ? 'timestamp' : formData.options.format"
        :format="formData.options.format"
        :style="{width: formData.options.width}"
      />
    </template>

    <template v-if="formData.type =='rate'">
      <el-rate
        v-model="dataModel"
        :max="formData.options.max"
        :disabled="formData.options.disabled"
        :allow-half="formData.options.allowHalf"
      />
    </template>

    <template v-if="formData.type == 'color'">
      <el-color-picker
        v-model="dataModel"
        :disabled="formData.options.disabled"
        :show-alpha="formData.options.showAlpha"
      />
    </template>

    <template v-if="formData.type == 'select'">
      <el-select
        v-if="isshow"
        v-model="dataModel"
        :disabled="formData.options.disabled"
        :multiple="formData.options.multiple"
        :clearable="formData.options.clearable"
        :placeholder="formData.options.placeholder"
        :style="{width: formData.options.width}"
        :filterable="formData.options.filterable"
      >
        <el-option
          v-for="item in (formData.options.remote ? formData.options.remoteOptions : formData.options.options)"
          :key="item[formData.options.props.value]"
          :value="item[formData.options.props.value]"
          :label="formData.options.showLabel || formData.options.remote?item[formData.options.props.label]:item[formData.options.props.value]"
        />
      </el-select>
    </template>

    <template v-if="formData.type=='switch'">
      <el-switch
        v-model="dataModel"
        :disabled="formData.options.disabled"
      />
    </template>

    <template v-if="formData.type=='slider'">
      <el-slider
        v-model="dataModel"
        :min="formData.options.min"
        :max="formData.options.max"
        :disabled="formData.options.disabled"
        :step="formData.options.step"
        :show-input="formData.options.showInput"
        :range="formData.options.range"
        :style="{width: formData.options.width}"
      />
    </template>

    <template v-if="formData.type === 'imgupload'">
      <Upload
        :data.sync="dataModel"
        :disabled="formData.options.disabled"
        :style="{'width': formData.options.width}"
        :width="formData.options.size.width"
        :height="formData.options.size.height"
        :token="formData.options.token"
        :domain="formData.options.domain"
        :multiple="formData.options.multiple"
        :length="formData.options.length"
        :is-qiniu="formData.options.isQiniu"
        :is-delete="formData.options.isDelete"
        :min="formData.options.min"
        :is-edit="formData.options.isEdit"
        :action="formData.options.action"
      />
    </template>

    <template v-if="formData.type == 'editor'">
      <vue-editor
        v-model="dataModel"
        :style="{width: formData.options.width}"
      />
    </template>

    <template v-if="formData.type == 'cascader'">
      <el-cascader
        v-model="dataModel"
        :disabled="formData.options.disabled"
        :clearable="formData.options.clearable"
        :placeholder="formData.options.placeholder"
        :style="{width: formData.options.width}"
        :options="formData.options.remoteOptions"
      />
    </template>

    <template v-if="formData.type == 'text'">
      <span>{{ dataModel }}</span>
    </template>
    <template v-if="formData.type === 'selectperson'">
      <selectperson
        :data.sync="dataModel"
        :disabled="formData.options.disabled"
      />
    </template>
    <template v-if="formData.type === 'selectmultperson'">
      <selectmultperson
        :data.sync="dataModel"
        :disabled="formData.options.disabled"
      />
    </template>
    <template v-if="formData.type === 'selectdepart'">
      <selectdepart
        :data.sync="dataModel"
        :disabled="formData.options.disabled"
      />
    </template>
    <!-- <template v-if="formData.type === 'billbuydetail'">
      <BillBuyDetail
        :data.sync="dataModel"
        :disabled="formData.options.disabled"
      />
    </template>
    <template v-if="formData.type === 'billtravelbusiness'">
      <billTravelBusiness
        :data.sync="dataModel"
        :disabled="formData.options.disabled"
      />
    </template> -->
    <!-- 自定义档案 -->
    <template v-if="formData.type === 'customarchives'">
      <CustomArchives
        :data.sync="dataModel"
        :disabled="formData.options.disabled"
      />
    </template>

    <!-- 项目 -->
    <template v-if="formData.type === 'project'">
      <Project
        :data.sync="dataModel"
        :disabled="formData.options.disabled"
        :form-data="accountData"
      />
    </template>
  </el-form-item>
</template>
<script>
import Upload from '@/components/uploadfile/index'
import selectperson from './business/selectperson'
import selectmultperson from './business/selectmultperson'
import selectdepart from './business/selectdepart'
import BillBuyDetail from './business/billbuydetail'
import billTravelBusiness from './business/billtravelbusiness'
import CustomArchives from './business/customarchives' // 自定义档案
import Project from './business/project' // 项目
export default {
  components: {
    Upload,
    selectperson,
    selectmultperson,
    BillBuyDetail,
    billTravelBusiness,
    selectdepart,
    CustomArchives,
    Project
  },
  // eslint-disable-next-line vue/require-prop-types
  props: ['formData', 'models', 'rules', 'remote', 'formConfig'],
  data() {
    return {
      dataModel: this.models[this.formData.model],
      isshow: false,
      accountData: this.models
    }
  },
  watch: {
    dataModel: {
      deep: true,
      handler(val) {
        this.models[this.formData.model] = val
        this.$emit('update:models', {
          ...this.models,
          [this.formData.model]: val
        })
        // this.$emit('input-change', val, this.formData.model)
      }
    },
    models: {
      deep: true,
      handler(val) {
        this.accountData = val
        this.dataModel = val[this.formData.model]
      }
    }
  },
  created() {
    if ((this.formData.options.remote && this.remote[this.formData.options.remoteFunc])) {
      this.$nextTick(() => {
        this.remote[this.formData.options.remoteFunc](data => {
          this.isshow = false
          this.formData.options.remoteOptions = data
          this.isshow = true
        })
      })
    } else if ((this.formData.options.options && this.formData.options.options.length > 0)) {
      this.isshow = true
    }
    if (this.formData.type === 'imgupload' && this.formData.options.isQiniu) {
      this.remote[this.formData.options.tokenFunc](data => {
        this.formData.options.token = data
      })
    }
  },
  methods: {}
}
</script>
